<template>
  <PageWrapper>
    <BasicTable @register="registerTable">
      <template #tableTitle>
        <a-space :size="12">
          <a-button
            type="primary"
            @click="operateDeploy(operateActionType.ADD)"
            v-auth="permissionCodeMap.deployManageAdd"
          >
            新增项目
          </a-button>
        </a-space>
      </template>
      <template #bodyCell="{ column, record, text }">
        <template v-if="column.dataIndex === 'operate'">
          <a-button
            type="link"
            v-auth="permissionCodeMap.deployManageView"
            class="g-operate-btn"
            @click="operateDeploy(operateActionType.VIEW, record)"
          >
            查看
          </a-button>
          <a-button
            type="link"
            v-auth="permissionCodeMap.deployManageEdit"
            class="g-operate-btn"
            @click="operateDeploy(operateActionType.EDIT, record)"
          >
            编辑
          </a-button>
          <a-button
            type="link"
            danger
            v-auth="permissionCodeMap.deployManageDel"
            class="g-operate-btn"
            @click="deployDelConfirm(record)"
          >
            删除
          </a-button>
        </template>
      </template>
    </BasicTable>
    <DeployAdd @register="deployAddRegister" @operateSuccess="operateSuccess" />
    <DeployDel @register="deployDelRegister" @operateSuccess="operateSuccess" />
  </PageWrapper>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, unref, onMounted, createVNode } from 'vue'
import PageWrapper from '@/components/PageWrapper/index.vue'
import { BasicTable, useTable } from '@/components/Table'
import { getDeployBasicColumns, getSearchFormConfig } from './dataSource'
import { useDrawer } from '@/components/Drawer'
import { useModal } from '@/components/Modal'
import DeployAdd from './components/DeployAdd.vue'
import DeployDel from './components/DeployDel.vue'
import EllipsisTooltip from '@/components/EllipsisTooltip/index.vue'
import { permissionCodeMap } from '@/utils/permissionCodeMap'
import { operateActionType, operateTxtType, constantMap } from '@/types/enum'
import { deployRecord } from '@/types/deployUpgrade'
import { message } from 'ant-design-vue'
import api from '@/api'
const { findProjectList } = api

const [deployAddRegister, { openDrawer: deployAddOpenDrawer, setDrawerProps }] = useDrawer()
const [deployDelRegister, { openModal: deployDelOpenModal }] = useModal()

const [registerTable, { reload, setPagination, getForm }] = useTable({
  api: findProjectList,
  columns: getDeployBasicColumns(),
  useSearchForm: true,
  formConfig: getSearchFormConfig(),
  scroll: { y: constantMap.tableYHeight, x: constantMap.tableXWidth }
})

const operateDeploy = (type: OperateType, record?: deployRecord) => {
  setDrawerProps({
    title: operateTxtType[type] + '项目'
  })
  deployAddOpenDrawer(true, {
    type,
    record
  })
}
const deployDelConfirm = (record: deployRecord) => {
  deployDelOpenModal(true, {
    deployId: record.id,
    deployName: record.appName
  })
}
// 操作成功回调
const operateSuccess = () => {
  setPagination({
    current: 1
  })
  reload()
}
</script>

<style lang="less" scoped></style>
